<template>
	<div class="user-default" ref="userdefault">
		<!--头部-->
		<header class="user-header-box" :class="{'user-drpshop': data.is_drp > 0 && (data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true)}">
			<div class="user-header dis-box">
				<div class="header-img">
					<router-link :to="{ name: 'profile' }">
						<img :src="data.avatar" alt="" class="img" v-if="data.avatar">
						<img src="../../../assets/img/user_default.png" alt="" class="img" v-else>
					</router-link>
				</div>
				<div class="header-admin box-flex">
					<div class="header-admin-box dis-box">
						<h4 class="box-flex" v-if="data.name !=''">{{ data.name }}</h4>
						<h4 class="box-flex" v-else>{{ data.username }}</h4>
						<div class="header-icon">
							<router-link :to="{ name: 'message' }" class="message"><i class="iconfont icon-home-xiaoxi"></i></router-link>
							<router-link :to="{ name: 'profile' }" class="set"><i class="iconfont icon-personal-shezhi"></i></router-link>
						</div>
					</div>

					<div class="growth">
						<div class="top">
							<p v-if="data.user_rank">{{ data.user_rank }}</p>
							<h4 v-if="data.drp_shop == 0 && data.user_rank_progress">{{$t('lang.growth_value')}}{{ data.user_rank_progress.progress_format}}</h4>
						</div>

						<van-progress v-if="data.drp_shop == 0 && data.user_rank_progress" color="#ffffff" :percentage=data.user_rank_progress.percentage
						 :show-pivot=false />
					</div>
				</div>
			</div>
			<div class="itemize">
				<router-link :to="{name:'collectionGoods'}" class="itemize_collection">
					<div class="num">{{data.collect_goods_num}}</div>
					<div :class="{'user_vip': data.is_drp > 0 && data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true}">{{$t('lang.my_collection')}}</div>
				</router-link>
				<router-link :to="{name:'history'}" class="itemize_collection itemizes">
					<div class="num">{{data.history_goods_num}}</div>
					<div :class="{'user_vip': data.is_drp > 0 && data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true}">{{$t('lang.my_tracks')}}</div>
				</router-link>
				<router-link :to="{name:'collectionShop'}" class="itemize_collection">
					<div class="num">{{data.collect_store_num}}</div>
					<div :class="{'user_vip': data.is_drp > 0 && data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true}">{{$t('lang.store_attention')}}</div>
				</router-link>

			</div>
			<div class="exclusive" :class="{'mar-vip': data.is_drp > 0 && data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true}"
			 v-if="data.is_drp > 0">
				<div class="left">
					<i class="icon_vip"><img src="../../../assets/img/newuser/icon-vip.png" class="img"></i>
					<span>{{$t('lang.high_grade_vip')}}</span>
				</div>
				<div class="center" v-if="data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true">{{$t('lang.store_price')}}{{data.drp_affiliate.total_drp_log_money}}</div>
				<div class="center" v-else>{{$t('lang.shopping_saves_money_shares')}}</div>
				<div class="right" v-if="data.drp_shop.membership_status != 0 ? data.drp_shop.audit == 1 : true">
					<router-link :to="{ name: 'drp-info' }"><span>{{$t('lang.my_vip')}}</span><i class="iconfont icon-more"></i></router-link>
				</div>
				<div class="right" v-else>
					<router-link :to="{ name: 'drp-register' }"><span>{{$t('lang.immediately_opened')}}</span><i class="iconfont icon-more"></i></router-link>
				</div>
			</div>
		</header>
		<!--我的推广-->
		<section class="user-function-list1 user-function-frist1">
			<div class="user-items-value">
				<div class="item">
					<p>{{ data.drp_affiliate ? data.drp_affiliate.user_child_num : data.user_affiliate.user_child_num }}</p>
					<span>{{$t('lang.my_team_alt')}}</span>
				</div>
				<div class="item">
					<p>{{ data.drp_affiliate ? data.drp_affiliate.register_affiliate_money : data.user_affiliate.register_affiliate_money }}</p>
					<span>{{$t('lang.registration_award')}}</span>
				</div>
				<div class="item tom">
					<p>{{ data.drp_affiliate ? data.drp_affiliate.total_drp_log_money : data.user_affiliate.order_affiliate_money }}</p>
					<span>{{$t('lang.sale_reward')}}</span>
				</div>
			</div>

			<template v-if="data.drp_affiliate">
				<router-link :to="{name:'drp-info'}" class="broadcasting">
					<div class="icon"><i class="iconfont icon-personal-share" style="font-size:2.4rem;"></i></div>
					<div class="textit">{{$t('lang.growth_tuiguang')}}</div>
				</router-link>
			</template>
			<template v-else>
				<router-link :to="{name:'affiliateIndex'}" class="broadcasting">
					<div class="icon"><i class="iconfont icon-personal-share" style="font-size: 2.4rem;"></i></div>
					<div class="textit">{{$t('lang.growth_tuiguang')}}</div>
				</router-link>
			</template>
		</section>

		<!--我的订单-->
		<section class="user-function-list">
			<div class="user-item-title">
				<div class="dis-box padding-all">
					<h3 class="box-flex">{{$t('lang.my_order')}}</h3>
					<div class="user-more">
						<router-link :to="{name:'order'}" class="box-flex">{{$t('lang.all_order')}}<i class="iconfont icon-more"></i></router-link>
					</div>
				</div>
			</div>
			<ul class="user-item-list user-order-list">
				<li>
					<a href="javascript:;" class="box-flex" @click="orderLink(1)">
						<h4><i class="user-icon"><img src="../../../assets/img/user/icon-1.png" class="img"></i></h4>
						<p>{{$t('lang.order_status_01')}}</p>
						<div class="user-list-num" v-if="data.pay_count > 0">{{ data.pay_count | capitalize }}</div>
					</a>
				</li>
				<template v-if="data.is_team > 0">
					<li>
						<router-link :to="{name:'team-order'}" class="box-flex">
							<h4><i class="user-icon"><img src="../../../assets/img/user/icon-2.png" class="img"></i></h4>
							<p>{{$t('lang.order_status_02')}}</p>
							<div class="user-list-num" v-if="data.team_num > 0">{{ data.team_num | capitalize}}</div>
						</router-link>
					</li>
				</template>
				<li>
					<a href="javascript:;" class="box-flex" @click="orderLink(2)">
						<h4><i class="user-icon"><img src="../../../assets/img/user/icon-3.png" class="img"></i></h4>
						<p>{{$t('lang.order_status_03')}}</p>
						<div class="user-list-num" v-if="data.confirmed_count > 0">{{ data.confirmed_count | capitalize}}</div>
					</a>
				</li>
				<li v-if="data.shop_can_comment > 0">
					<router-link :to="{name:'comment'}" class="box-flex">
						<h4><i class="user-icon"><img src="../../../assets/img/user/icon-4.png" class="img"></i></h4>
						<p>{{$t('lang.order_status_04')}}</p>
						<div class="user-list-num" v-if="data.not_comment > 0">{{ data.not_comment | capitalize}}</div>
					</router-link>
				</li>
				<li>
					<router-link :to="{name:'refound'}" class="box-flex">
						<h4><i class="user-icon"><img src="../../../assets/img/user/icon-5.png" class="img"></i></h4>
						<p>{{$t('lang.order_status_05')}}</p>
						<div class="user-list-num" v-if="data.return_count > 0">{{ data.return_count | capitalize}}</div>
					</router-link>
				</li>
			</ul>
		</section>
		<!--我的钱包-->

		<section class="user-function-list1">
			<div class="user-items-value">
				<router-link :to="{name:'account'}" class="item items">
					<p>{{ data.user_money }}</p>
					<span>{{$t('lang.money')}}</span>
				</router-link>
				<router-link :to="{name:'bonus'}" class="item items">
					<p>{{ data.bonus }}</p>
					<span>{{$t('lang.bonus')}}</span>
				</router-link>
				<router-link :to="{name:'account'}" class="item items tom">
					<p>{{ data.pay_points }}</p>
					<span>{{$t('lang.integral')}}</span>
				</router-link>
				<router-link :to="{name:'channel'}" class="item items tom">
					<p>{{ data.pay_points }}</p>
					<span>渠道</span>
				</router-link>
			</div>

			<template>
				<router-link :to="{name:'account'}" class="broadcasting">
					<div class="icon red"><i class="iconfont icon-personal-money" style="font-size:2.4rem;"></i></div>
					<div class="textit">{{$t('lang.account_manage')}}</div>
				</router-link>
			</template>
			<!-- 	<template v-else>
				<router-link :to="{name:'affiliateIndex'}" class="broadcasting"><div class="popup"></div>
			<div class="icon"><i class="iconfont icon-personal-money" style="font-size: 2.4rem;"></i></div>
			<div class="textit">{{$t('lang.growth_tuiguang')}}</div></router-link>
			</template> -->
		</section>

		<section class="user-function-list" v-if="data.coupons_num!==0">
			<div class="user-item-title">
				<div class="dis-box padding-all ">
					<h3 class="box-flex">{{$t('lang.my_coupons')}}({{ data && data.coupons_num || 0 }})</h3>
					<div class="user-more">
						<router-link :to="{name:'userCoupon'}" class="box-flex">{{$t('lang.more')}}<i class="iconfont icon-more"></i></router-link>
					</div>
				</div>
			</div>
			<div class="user-item_on">
				<div class="my_coupons" v-for="(item,index) in couponData">
					<div class="my">
						<div class="my_coupons_left">
							<div class="price">
								<template v-if="item.cou_type == 5">{{$t('lang.free_shipping')}}</template>
								<template v-else>
									<template v-if="!item.order_sn">
										<template v-if="item.uc_money > 0">
											<i class="cou">￥</i>{{ item.uc_money }}
										</template>
										<template v-else>
											<i class="cou">￥</i>{{item.cou_money}}
										</template>
									</template>
									<template v-else>
										<i class="cou">￥</i>{{item.order_coupons}}
									</template>
								</template>


							</div>
							<i class="reduction">{{$t('lang.man')}}{{item.cou_man}}{{$t('lang.usable')}}</i>
							<div class="platform">{{ item.store_name }}</div>

						</div>
						<div class="my_coupons_right" @click="couponLink(item.cou_id)">
							{{$t('lang.store_price1')}}
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="user-function-list">
			<div class="user-item-title">
				<div class="dis-box padding-all ">
					<h3 class="box-flex">{{$t('lang.all_tool')}}</h3>
				</div>
			</div>
			<div class="user-nav-item">
				<router-link :to="{name:'collectionGoods'}">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon1.png" class="img"></i></label>
					<p>{{$t('lang.collect_goods')}}</p>
				</router-link>
				<router-link :to="{name:'collectionShop'}">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon2.png" class="img"></i></label>
					<p>{{$t('lang.collect_shop')}}</p>
				</router-link>
				<template v-if="data.is_share > 0">
					<router-link :to="{name:'affiliate'}">
						<label><i class="user-icon"><img src="../../../assets/img/user/icon3.png" class="img"></i></label>
						<p>{{$t('lang.my_share')}}</p>
					</router-link>
				</template>
				<template v-if="data.is_drp > 0">
					<router-link :to="{name:'drp'}">
						<label><i class="user-icon"><img src="../../../assets/img/user/icon4.png" class="img"></i></label>
						<p>{{$t('lang.my_drp')}}</p>
					</router-link>
				</template>
				<router-link :to="{name:'crowdfunding'}">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon5.png" class="img"></i></label>
					<p>{{$t('lang.my_crowdfunding')}}</p>
				</router-link>
				<template v-if="data.is_team > 0">
					<router-link :to="{name:'team'}">
						<label><i class="user-icon"><img src="../../../assets/img/user/icon6.png" class="img"></i></label>
						<p>{{$t('lang.my_team')}}</p>
					</router-link>
				</template>
				<a href="javascript:;" @click="merchantsChange">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon7.png" class="img"></i></label>
					<p>{{$t('lang.settlement')}}</p>
				</a>
				<router-link :to="{name:'history'}">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon8.png" class="img"></i></label>
					<p>{{$t('lang.history')}}</p>
				</router-link>
				<template v-if="data.is_bargain > 0">
					<router-link :to="{name:'bargain'}">
						<label><i class="user-icon"><img src="../../../assets/img/user/icon9.png" class="img"></i></label>
						<p>{{$t('lang.my_bargain')}}</p>
					</router-link>
				</template>
				<router-link :to="{name:'giftCard'}">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon10.png" class="img"></i></label>
					<p>{{$t('lang.my_gift_card')}}</p>
				</router-link>
				<router-link :to="{name:'giftCardOrder'}">
					<label><i class="user-icon"><img src="../../../assets/img/user/icon11.png" class="img"></i></label>
					<p>{{$t('lang.my_th_page')}}</p>
				</router-link>
				<!-- <router-link :to="{name:'userAuction'}">
					<label><i class="user-icon"><img src="../../../assets/img/newuser/icon_14.png" class="img"></i></label>
					<p>{{$t('lang.my_auction')}}</p>
				</router-link> -->
			</div>
		</section>

		<!-- <ec-product-pick></ec-product-pick> -->

		<!--猜你喜欢-->
        <section class="goods-detail-guess text-center" v-if="goodsGuessList">
            <h5 class="title-hrbg"><span>{{$t('lang.guess_love')}}</span><hr></h5>
            <section class="product-list product-list-medium">
                <ProductList :data="goodsGuessList" routerName="goods" :productOuter="true"></ProductList>
                <div class="footer-cont" v-if="footerCont">{{$t('lang.no_more')}}</div>
				<template v-if="loading">
					<van-loading type="spinner" color="black" />
				</template>
            </section>
        </section>

		<ec-filter-top :scrollState="scrollState"></ec-filter-top>

		<van-popup v-model="show" class="merchantsPopup">
			<div class="title">{{$t('lang.my_merchants')}}</div>
			<div class="content">
				<van-radio-group v-model="result">
					<van-radio name="0">{{$t('lang.merchants_store')}}</van-radio>
					<van-radio name="1">{{$t('lang.supplier_apply')}}</van-radio>
				</van-radio-group>
				<van-button type="danger" @click="onConfirm">{{$t('lang.confirm')}}</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { mapState } from 'vuex'

	import {
		Radio,
		RadioGroup,
		Popup,
		Button,
		Progress,
		loading
	} from 'vant'

	import EcProductPick from '@/components/product-pick/Frontend'
	import EcFilterTop from '@/components/element/FilterTop'
	import ProductList from '@/components/ProductList'
	import arrRemove from '@/mixins/arr-remove'

	export default {
		name: 'user-default',
		props: ['data'],
		data() {
			return {
				show: false,
				result: '0',
				page: 1,
				size: 10,
				scrollState:false,
				footerCont:false,
				loading:false
			}
		},
		filters: {
		  capitalize: function (value) {
		    if (value>99) return '99+'
			 return value
			}
		  },
		computed: {
            goodsGuessList:{
            	get() {
					return this.$store.state.shopping.goodsGuessList
				},
				set(val) {
					this.$store.state.shopping.goodsGuessList = val
				}
            },
			couponData: {
				get() {
					return this.$store.state.user.couponData
				},
				set(val) {
					this.$store.state.user.couponData = val
				}
			}
		},
		//初始化加载数据
		created() {
			this.couponClick()

			//猜你喜欢列表
            this.goodsGuessHandle(1)
		},
		mounted() {
			this.$nextTick(() => {
				window.addEventListener('scroll', this.onScroll)
			})
		},
		components: {
			[Popup.name]: Popup,
			[Radio.name]: Radio,
			[RadioGroup.name]: RadioGroup,
			[Button.name]: Button,
			[Progress.name]: Progress,
			[loading.name]: loading,
			EcProductPick,
			EcFilterTop,
			ProductList
		},
		methods: {
			//猜你喜欢
            goodsGuessHandle(page){
            	if(page){
					this.page = page
					this.size = Number(page) * 10
				}

                this.$store.dispatch('setGoodsGuess',{
                	page:this.page,
                	size:this.size
                })
            },
			onScroll(e) {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

				if (scrollTop > 800) {
					this.scrollState = true
				} else {
					this.scrollState = false
				}

				//滚动到底部300距离 瀑布流展示推荐商品
				if(scrollTop + 300 > (this.$refs.userdefault.getBoundingClientRect().height - document.documentElement.clientHeight)){
					// this.$store.dispatch('updateScrollPickOpen', {
					// 	type:true
					// })

					if(this.page * this.size == this.goodsGuessList.length){
			  			this.page ++
			  			this.goodsGuessHandle()	
			  		}
				}
		    },
			orderLink(val) {
				this.$router.push({
					name: 'order',
					query: {
						tab: val
					}
				})
			},
			couponClick(page) {
				if (page) {
					this.page = page
					this.size = Number(page) * 10
				}

				this.$store.dispatch('setUserCoupon', {
					page: this.page,
					size: this.size,
					type: 0
				})
			},
			couponLink(id) {
				this.$router.push({
					name: 'searchList',
					query: {
						cou_id: id
					}
				})
			},
			merchantsChange() {
				if (this.data.is_suppliers > 0) {
					this.show = true;
				} else {
					this.$router.push({
						name: 'merchants'
					})
				}
			},
			onConfirm() {
				if (this.result == 0) {
					this.$router.push({
						name: 'merchants'
					})
				} else {
					this.$router.push({
						name: 'supplier-apply'
					})
				}
			}
		},
		destroyed() {
			window.removeEventListener("scroll",  this.onScroll);
		},
		watch:{
			goodsGuessList(){
				if(this.page * this.size == this.goodsGuessList.length){
					this.loading = true
				}else{
					this.loading = false
					this.footerCont = this.page > 1 ? true : false
				}

				this.goodsGuessList = arrRemove.trimSpace(this.goodsGuessList)
			},
		}
	}
</script>
<style>
	.merchantsPopup {
		width: 70%;
		border-radius: .5rem;
		padding: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.merchantsPopup .title {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		color: #000;
		font-size: 20px;
		border-bottom: 1px solid #000000;
		padding: 0 0 2rem;
	}

	.merchantsPopup .content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.merchantsPopup .van-radio-group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 3rem 0;
	}

	.merchantsPopup .van-radio {
		margin-right: 10px;
	}

	.merchantsPopup .van-radio__input {
		font-size: 18px;
	}

	.user_vip {
		color: rgba(247, 247, 247, 0.6) !important;
	}

	.mar-vip {
		background: linear-gradient(90deg, rgba(252, 231, 202, 1), rgba(241, 215, 181, 1)) !important;
	}


	.my_coupons:before {
		content: '';
		position: absolute;
		z-index: 0;
		left: 73%;
		top: -7.5px;
		width: 15px;
		height: 15px;
		border-radius: 100%;
		background: #fff;
		border: 1px solid rgba(242, 210, 210, 1);
		/* margin-top: -10px; */
	}

	.my_coupons:after {
		content: '';
		position: absolute;
		z-index: 0;
		left: 73%;
		bottom: -7.5px;
		width: 15px;
		height: 15px;
		border-radius: 100%;
		background: #fff;
		border: 1px solid rgba(242, 210, 210, 1);
		/* margin-top: -10px; */
	}

	.my {
		display: flex;
		width: 100%;
		height: 100%;
		border: 1px solid rgba(242, 210, 210, 1);
		border-radius: 0.5rem;
		background: rgba(251, 242, 242, 1);
	}

	.itemizes {
		position: relative;
	}

	.itemizes:after {
		content: "";
		position: absolute;
		top: 0.3rem;
		bottom: 0.3rem;
		left: 0;
		content: '';
		width: 0;
		border-left: solid rgba(255, 255, 255, 0.5) 1px;
	}

	.itemizes::before {
		content: "";
		position: absolute;
		top: 0.3rem;
		bottom: 0.3rem;
		right: 0;
		content: '';
		width: 0;
		border-left: solid rgba(255, 255, 255, 0.5) 1px;
	}

	.user-more {
		padding-right: 0;
	}

	.user-item-title {
		position: relative;
	}

	.user-item-title:after {
		content: "";
		position: absolute;
		bottom: 0;
		height: 1px;
		left: 1.1rem;
		right: 1.1rem;
		background: rgba(235, 235, 235, 1);
	}

	.user-items-value {
		position: relative;
	}

	.user-items-value:after {
		position: absolute;
		z-index: 1;
		top: 0;
		right: -10px;
		width: 15px;
		height: 100%;
		background: url(../../../assets/img/user/icon-6.png);
		background-size: 100% 100%;
		content: "";
	}

	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.header-admin-box {
			height: 2rem;
			position: relative;
		}

		.header-icon {
			position: absolute;
			top: -1rem;
			right: 0;
		}
	}
</style>
